
<template>
  <div>
    <el-row>
      <el-col :span="24" style="height: 80vh">
        <CesiumMap ref="cesiumMap" :tileSet="tileSet"></CesiumMap>
      </el-col>
    </el-row>
  </div>
</template>
    


<script>
import CesiumMap from "../cesiumMap/index.vue";
let viewer = null;
export default {
  components: { CesiumMap },
  data() {
    return {
      tileSet: {

      }
    }
  },
  methods: {
    loadHeatmap: function () {
      const heatmap1 = new CesiumHeatmapGL(viewer, '/data/heatmap/example.geojson');
    }

  },
  setup() {
    return {
    };
  },

  mounted() {
    let script1 = document.createElement('script');
    script1.type = 'text/javascript';
    script1.src = '../lib/heatmap/CesiumHeatmapGL.js';
    document.body.appendChild(script1);

    let script2 = document.createElement('script');
    script2.type = 'text/javascript';
    script2.src = '../lib/heatmap/webgl-heatmap.js';
    document.body.appendChild(script2);

    viewer = this.$refs.cesiumMap.viewer;
    viewer.imageryLayers.removeAll();
    this.$refs.cesiumMap.loadTianditu();

    let that = this;
    setTimeout(function () {
      that.loadHeatmap();
    }, 3000);

  },
};
</script>
  
<style scoped></style>
  